<template>
	<view>
		<view class="nav">
			<view class="h1">绑定手机号</view>
			<view style="color:#999999">输入手机号码</view>
			<view>
				<input placeholder="手机号" type="number" v-model="phone" @input="phones" />
				<view class="account">
					<input placeholder="验证码" type="number" @input="yzs" />
					<view class="code" v-if='state' @click="getCode">获取验证码</view>
					<view class="codes" v-else>{{currentTime}}s</view>
				</view>

			</view>

			<view class="submit" @click="sub">确定</view>

		</view>
	</view>
</template>

<script>
	import {getBindPhoneApi,getBindPhoneCodeApi} from '@/config/api.js'
	export default {
		data() {
			return {
				phone: '',
				password: '',
				yz: '',
				state: true, //是否开启倒计时
				totalTime: 60, //总时间，单位秒
				recordingTime: 0, //记录时间变量
				currentTime: 0, //显示时间变量

			}
		},
		methods: {
			//获取验证码
			getCode() {
				var tel = /^1[3456789]\d{9}$/;
				let that = this
				console.log(that.phone)
				if (that.phone == '' || that.phone.length != 11 || !(tel.test(that.phone))) {
					wx.showToast({
						title: '请输入正确手机号',
						icon: 'none'
					})
					return false
				}
				//发送验证码
                  getBindPhoneCodeApi({
					  phone:this.phone
				  }).then(res=>{
					  //把显示时间设为总时间
					  this.currentTime = this.totalTime;
					  //开始倒计时
					  this.state = false;
					  //执行倒计时
					  this.checkingTime();
					  
				  })
				
					


				
			},
			phones(e) {

				this.phone = e.detail.value

			},
			yzs(e) {

				this.yz = e.detail.value

			},
			// 倒计时
			checkingTime() {
				let that = this;
				//判断是否开启
				if (!this.state) {
					//判断显示时间是否已到0，判断记录时间是否已到总时间
					if (this.currentTime > 0 && this.recordingTime <= this.totalTime) {
						//记录时间增加 1
						this.recordingTime = this.recordingTime + 1;
						//显示时间，用总时间 - 记录时间
						this.currentTime = this.totalTime - this.recordingTime;
						//1秒钟后，再次执行本方法
						setTimeout(() => {
							//定时器内，this指向外部，找不到vue的方法，所以，需要用that变量。
							that.checkingTime(this.currentTime);
							
						}, 1000)
					} else {
						//时间已完成，还原相关变量
						this.state = true; //关闭倒计时
						this.recordingTime = 0; //记录时间为0
						this.currentTime = this.totalTime; //显示时间为总时间
					}
				} else {
					//倒计时未开启，初始化默认变量
					this.state = true;
					this.recordingTime = 0;
					this.currentTime = this.totalTime;
				}
			},
			yzm() {
				let that = this;
				let data = {
					phone: this.phone,

				}

				app.res.req('/send/login', data, (res) => {
					console.log(res.data)
					if (res.status == 1000) {
						that.getyzm()

					} else {
						wx.showToast({
							title: res.msg,
							icon: 'none'
						})
					}

				})

			},
			//重置
			sub() {
				let that = this;
				var tel = /^1[3456789]\d{9}$/;
				if (that.phone == '') {
					wx.showToast({
						title: '请输入手机号',
						icon: 'none'
					})
					return false
				}
				
				if (that.yz == '') {
					wx.showToast({
						title: '请输入验证码',
						icon: 'none'
					})
					return false
				}
				// if (that.data.password == '') {
				//   wx.showToast({
				//     title: '请输入密码',
				//     icon: 'none'
				//   })
				//   return false
				// }
				getBindPhoneApi({
					phone:this.phone,
					code:this.yz
				}).then(res=>{
					console.log(res)
					// this.$store.commit('changeUserinfo',res)
					uni.setStorageSync('userInfo',res)
					uni.setStorageSync('token',res.token)
					
					setTimeout(() => {
					
						if (uni.getStorageSync('url')) {
					
							uni.redirectTo({ //非tabber
								url: uni.getStorageSync('url'),
								fail() {
									uni.switchTab({
										url: '/pages/home/home/home'
									})
								}
							})
							uni.removeStorageSync('url')
						} else if (uni.getStorageSync('urls')) { //tabber跳转
							uni.switchTab({
								url: uni.getStorageSync('urls')
							})
							uni.removeStorageSync('urls')
						} else {
							uni.switchTab({
								url: '/pages/home/home/home'
							})
						}
					}, 1500)
				}).catch(err=>{
					uni.showToast({
						title:res.msg,
						icon:'none'
					})
				})
				

				
			},
		}
	}
</script>

<style>
	/* pages/login_forget/login_forget.wxss */
	page {
		font-size: 28rpx;
	}

	.nav {
		padding: 30rpx;
		box-sizing: border-box;
	}

	.h1 {
		font-size: 36rpx;
		font-weight: 700;
		margin-bottom: 20rpx;
	}

	input {
		width: 100%;
		height: 100rpx;
		margin-top: 40rpx;
		border-bottom: 1rpx solid #e7e7e7;
	}

	.submit {
		margin-top: 60rpx;
		width: 100%;

		height: 80rpx;
		color: #fff;
		line-height: 80rpx;
		text-align: center;
		background:linear-gradient(132deg,rgba(244,61,107,1) 0%,rgba(244,65,149,1) 100%);
		border-radius: 40rpx;
	}

	.forget {
		width: 100%;
		margin-top: 40rpx;
		text-align: center;
	}

	.account {
		border-bottom: 1rpx solid #e7e7e7;
	}

	.account input {
		width: 70%;
		border: 0;
		display: inline-block;
	}

	.code {
		width: 180rpx;
        background:linear-gradient(132deg,rgba(244,61,107,1) 0%,rgba(244,65,149,1) 100%);
		height: 54rpx;
		line-height: 54rpx;
		text-align: center;
		border-radius: 30rpx;
		border: 1rpx solid #f12200;
		color: #f12200;
		float: right;
		margin-top: 70rpx;
		color: #FFFFFF;
	}

	.codes {
		width: 80rpx;
		height: 54rpx;
		line-height: 54rpx;
		text-align: center;
		border-radius: 35rpx;
		border: 1rpx solid #f12200;
		color: #f12200;
		float: right;
		margin-top: 70rpx;
	}
</style>
